// @flow
import React from 'react'
import styles from './Gauge.css'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/gauge'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import R from 'ramda'

type Props = {
  xData: Array<Object>,
  chartData: Array<Object>,
  title: String,
  yTitle: String,
  name: string,
  unit: string,
  color: string,
  min: number,
  max: number,
  value: number,
  valueColor: string,
  speedList: Array<Object>
}
class Line extends React.Component {
  props: Props
  timeOut: number
  intervar: number
  myChart: Object
  option: Object
  componentWillUnmount () {
    clearTimeout(this.timeOut)
    clearInterval(this.intervar)
  }

  componentDidMount () {
    this.draw(this.props)
  }

  componentWillReceiveProps (nextProps: Props) {
    if (!R.equals(nextProps, this.props)) {
      this.draw(nextProps)

      // const main = this.refs.main
      // if (main && this.myChart) {
      //   this.option.series[0].data[0].value = nextProps.value
      //   // this.option.series[0].min = nextProps.min
      //   // this.option.series[0].max = nextProps.max
      //   this.myChart.setOption(this.option)
      // }
    }
  }
  draw (props: Props) {
    let { name, color, valueColor, min, max, speedList } = props
    const colors = ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee']
    // let names = ''
    // speedList.map((d, i) => {
    //   let value = d.kmxValue
    //   if (!value) {
    //     value = 0
    //   }
    //   names += d.name + '：' + value + d.unit + '\n\n'
    // })
    const dataS = speedList.map((d, i) => {
      let value = d.kmxValue
      if (!value) {
        value = 0
      }
      return {
        value: value,
        // name: names,
        name: '',
        channelName: d.name,
        unit: d.unit,
        itemStyle: {
          normal: {
            color: colors[i]
          }
        }
      }
    })
    this.myChart = echarts.init(this.refs.main)
    this.option = {
      tooltip : {
        formatter: function (item) {
          return item.data.channelName + '：' + item.data.value + ' ' + item.data.unit
          // return item.data.name
        }
      },
      series : [
        {
          name: name,
          type: 'gauge',
          z: 0,
          min: min,
          max: max,
          splitNumber: 5,
          radius: '90%',
          startAngle: 180,
          endAngle: 0,
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              width: 10,
              // color: [[0.5, '#6ba23e'], [0.9, '#dce102'], [1, '#f4252d']]
              // color: [[0.09, '#2ECC71'], [0.82, '#5D9CEC'], [1, '#D8334A']]
              // color: [[0.09, '#666'], [0.82, '#666'], [1, '#DA4453']]
              color: [[0.2, color], [0.8, color], [1, color]]
            }
          },
          // axisLabel: {            // 坐标轴小标记
          //   textStyle: {
          //     color: '#000'
          //   }
          // },
          axisTick: {
            length: 12,        // 属性length控制线长
            lineStyle: {       // 属性lineStyle控制线条样式
              color: color
            }
          },
          splitLine: {           // 分隔线
            length: 16,         // 属性length控制线长
            lineStyle: {
              width:1,
              color: color
            }
          },
          title : {
            show: true,
            offsetCenter: [0, '58px'],
            textStyle: {
              fontSize: 13,
              // fontWeight: 'bold',
              fontFamily: 'PingFang SC'
            }
          },
          pointer: {
            width: 4
          },
          itemStyle: {
            normal: {
              borderWidth: 1,
              borderType: 'solid'
            }
          },
          dial: {
            backgroundColor : '#BF263C'
          },
          detail : {
            width: 0,
            height: 0,
            // backgroundColor: color,
            borderWidth: 1,
            borderColor: '#fff',
            offsetCenter: [0, '50%'],
            textStyle: {
              fontSize: 14,
              color: valueColor,
              fontWeight: 'bold'
            },
            // formatter: (value) => {
            //   const values = dataS.map((d, i) => {
            //     return d.value
            //   })
            //   return values.join('_')
            // }
            formatter: (value) => {
              return ''
            }
          },
          data: dataS
        }
      ]
    }
    this.myChart.setOption(this.option)
    const component = this
    this.timeOut = setTimeout(() => {
      component.myChart.resize()
    }, 5)
  }
  render () {
    let { speedList } = this.props
    return (
      <div className={styles['main']} >
        <div ref='main' style={{
          position: 'absolute', top: '0', left: '0', right: '0', bottom: '0'
        }} />
        <div className={styles['speedlist']}>{
          speedList.map((d, i) => {
            let value = d.kmxValue
            if (!value) {
              value = 0
            }
            return <p> {d.name}: {value} {d.unit}</p>
          })
        }</div>
      </div>
    )
  }
}
export default Line
